<template>
    <el-button type="primary" icon="ele-Plus" size="default" @click="emit('setState',1)">添加SPU</el-button>

    <el-table :data="spuPageList" :style="{ margin: '30px 0' }" border stripe>
        <el-table-column label="序号" type="index" width="100" />
        <el-table-column prop="spuName" label="SPU名称" width="200"></el-table-column>
        <el-table-column prop="description" label="SPU描述"></el-table-column>
        <el-table-column label="操作" width="240" >
            <template v-slot="{row,$index}">
                <el-button type="primary" icon="ele-Plus" size="small" @click="addSku(row)"></el-button>
                <el-button type="primary" icon="ele-Edit" size="small" @click="emit('setState',1,row)"></el-button>
                <el-button type="info" icon="ele-Warning" size="small" @click=""></el-button>
                <el-button type="danger" icon="ele-Delete" size="small" @click="deleteSpu(row)"></el-button>
            </template>
        </el-table-column>
    </el-table>

    <el-pagination v-model:currentPage="page" v-model:page-size="limit" :page-sizes="[3, 5, 7, 9]" :pager-count="5"
        layout=" sizes, prev, pager, next,total, jumper" :total="total" />
</template>

<script lang="ts">
import { defineComponent } from "vue";
import { ElMessage } from 'element-plus';
import { requestDeleteSpu, requestSpuList, type SpuInfoType } from '@/api/spu';
export default defineComponent({
    name: "SpuList",
});
</script>

<script setup lang="ts">
import { ref, watch } from 'vue'
import useAttrStore from '@/stores/attr';
import { storeToRefs } from 'pinia';

const attrStore = useAttrStore()

const { category3Id } = storeToRefs(attrStore)
const page = ref(1)
const limit = ref(3)
const total = ref(0)

//接受自定义事件
const emit = defineEmits<{
    (event:'setState',state:number,row?: SpuInfoType):void
}>()

//声明数据保存spu分页列表
const spuPageList = ref<SpuInfoType[]>([])
//发送spu分页列表请求
const getSpuPageList = async () => {
    try {
        const re = await requestSpuList(
            page.value,
            limit.value,
            category3Id.value as number
        )

        //把分页数据中的总数和分页列表叫给响应式数据
        spuPageList.value = re.records
        total.value = re.total
    } catch (e) {
        ElMessage.error('请求分页列表失败')
    }
}


//1.当三级分类被选择的时候,展示当前三级分类下的所有spu
watch(
    category3Id,
    () => {
        if (category3Id.value === null) {
            //如果三级分类变为null,则清空分页列表
            spuPageList.value = []
            total.value = 0
            return
        }
        //一旦嚓tegory3Id发生变化,就立即发送请求 请求新的分页列表
        getSpuPageList()
    },
    { immediate: true }
)


//监听page和limit然后发送请求获取列表
watch([page,limit],()=>{
    if(category3Id.value === null) {return}
    getSpuPageList()
})

//删除某个Spu
const deleteSpu = async (row: SpuInfoType) => {
  try {
    await requestDeleteSpu(row.id as number);
    //发送请求
    getSpuPageList();
  } catch (e) {
    ElMessage.error("删除数据失败");
  }
};

//点击去往新增sku
const addSku = (row: SpuInfoType) => {
  emit("setState", 0, row);
};
</script>